<template>
	<view class="page">
		<nav-bar />
		<view class="content">
			<!-- wifi连接 -->
			<wifi ref="wifi" />
			<!-- 录制 -->
			<view class="content_record l-f l-row-c">
				<view class="content_record_box l-f l-row-c">
					<view 
					@click="onRecord"
					hover-class="hover-scale"
					:hover-stay-time="100"
					class="content_record_box_inner l-f l-row-c"
					:class="isRecord ? 'content_record_box_active' : ''">
						<view class="content_record_box_inner_label">{{isRecord ? '正在录制' : '开始录制'}}</view>
					</view>
				</view>
			</view>
			<!-- 视频列表 -->
			<view class="content_video">
				<view class="content_video_title">视频列表</view>
				<scroll-view scroll-y class="content_video_list">
					<template v-if="videoList.length > 0">
						<video-item
						 v-for="(item,index) in videoList"
						 :key="item.id"
						 :options="item"
						 />
					</template>
					<view v-else class="content_video_nodata">暂无视频</view>
				</scroll-view>
			</view>
		</view>
		 <!-- record-edit -->
		 <record-edit ref="recordEdit" @success="onRecordSuccess" @close="isRecord = false" />
		<!-- record-finish -->
		<record-finish ref="recorrdFinish" :record="currentRecordInfo" @update="onUpdate" />
		<Tabbar :current="0" />
	</view>
</template>

<script>
	import NavBar from '@/components/nav-bar/nav-bar.vue'
	import Wifi from '@/components/wifi/wifi.vue'
	import Tabbar from '@/components/tabbar/tabbar.vue'
	import RecordEdit from '@/components/record-edit/record-edit.vue'
	import VideoItem from '@/components/video-item/video-item.vue'
	import RecordFinish from '@/components/record-finish/record-finish.vue'
	import ModelItem from '@/components/model-item/model-item.vue'
	export default {
		components: {
			NavBar,
			Wifi,
			Tabbar,
			RecordEdit,
			VideoItem,
			RecordFinish,
			ModelItem,
		},
		computed: {
			progressWidth: function() {
				return Math.ceil((this.progress*540)/100) + 'rpx'
			}
		},
		data() {
			return {
				tabIndex: 0,
				isRecord: false, // 是否在录制
				videoList: [
					{
						id: 1,
						name: '视频1',
						size: 300,
						status: 1
					},
					{
						id: 2,
						name: '视频2',
						size: 300,
						status: 1
					}
				],
				connectWifiList: [], // 当前本地连接过的wifi列表
				wifiList: [], // 当前搜索的wifi列表
				connectWifiInfo: {}, // 当前连接wifi信息
				isConnect: false, // 是否连接上
				password: '',
				isOpen: false,
				currentRecordInfo: {},
				navList: ['下载','更新'],
				navIndex: 0,
				modelList: [],
				navStatus: 'noMore',
				progress: 0,
				timeId: null,
				currentConnect: {}
			}
		},
		
		onLoad() {
			uni.hideTabBar()
		},
		methods: {
			// nav切换
			navClick(index) {
				this.navIndex = index
			},
			// 点击录制
			onRecord() {
				this.isRecord = true
				this.$refs.recordEdit.open()
			},
			// 录制完成后的事件
			onRecordSuccess(e) {
				this.isRecord = false
				const record = {
					id: parseInt(Math.random()*99999999),
					name: e.name,
					size: Math.floor(e.size/1024/1024),
					status: 0
				}
				this.currentRecordInfo = record
				this.$refs.recorrdFinish.open()
			},
			// 视频上传
			onUpdate(type) {
				// 模拟上传
				this.videoList.unshift(this.currentRecordInfo)
				this.$refs.recorrdFinish.close()
				setTimeout(() => {
					this.$set(this.videoList[0],'status',1)
					this.currentRecordInfo = {}
				},3000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/pages/index/index.scss";
</style>
